<template>
  <div ref="uploadFiles">
    <el-row :gutter="20" style="width:800px;margin-top:20px">
      <el-col :span="10" :offset="6">
        <el-upload
          ref="upload"
          class="upload-demo"
          accept=".xlsx, .xls, .csv,.docx,doc,.pdf,.png,.jpg,.jpeg"
          multiple
          :limit="5"
          drag
          action="#"
          :auto-upload="false"
          :on-exceed="onExceed"
          :on-change="onChange"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">把文件拖到此处或<em>浏览</em></div>
          <div slot="tip" class="el-upload__tip">一次最多上传5个文件,单个文件大小不超过{{ fileSizeLimit }}MB</div>
        </el-upload>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:800px;margin-top:20px">
      <el-col :span="3" :offset="7">
        <el-button type="primary" @click.stop="clear">清空</el-button>
      </el-col>
      <el-col :span="6" :offset="4">
        <el-button type="primary" @click.stop="save">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { uploadFiles } from '@/api/common/file'
export default {
  name: 'UploadFile',
  props: {
    // 自动添加一个key为layerid的值， 该值为创建层的id
    layerid: {
      type: String,
      default: ''
    },
    tableName: {
      type: String,
      required: true
    },
    tableId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fileSizeLimit: 100
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  mounted() {
    if (this.layerid) {
      this.$store.commit('app/SET_LAYERID', this.layerid)
    }
  },
  methods: {
    onExceed() {
      this.$message({
        message: '一次最多只能上传5个文件',
        type: 'warning',
        duration: 1000
      })
    },
    onChange(file) {
      if (file.size / 1024 / 1024 > this.fileSizeLimit) {
        this.$refs.upload.uploadFiles.splice(this.$refs.upload.uploadFiles.indexOf(file), 1)
        this.$message({
          message: '上传文件超过最大限制100MB',
          type: 'warning',
          duration: 1000
        })
      }
    },
    clear() {
      this.$refs.upload.clearFiles()
    },
    save() {
      if (!this.$refs.upload.uploadFiles.length) {
        this.$message({
          message: '请先上传文件',
          type: 'warning',
          duration: 1000
        })
        return
      }
      const loading = this.$loading({
        target: this.$refs.uploadFiles,
        lock: true,
        text: '提交数据中',
        spinner: 'el-icon-loading'
      })
      const _this = this
      const formData = new FormData()
      _this.$refs.upload.uploadFiles.forEach(function(item, index) {
        formData.append('files', item.raw)
      })
      formData.append('tableName', _this.tableName)
      formData.append('tableId', _this.tableId)
      formData.append('createUser', _this.userId)
      uploadFiles(formData).then(res => {
        if (res && res.result == 'success') {
          _this.$layer.close(_this.layerid) // 关闭弹框
          _this.$parent.refresh()
        }
      }).finally(() => {
        loading.close()
      })
    }
  }
}
</script>
<style scoped>
</style>
